
import './App.css';
import { Layout, Menu } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { useHistory , Route,Switch,Redirect,} from 'react-router-dom';
import Client from './views/Client/Client';
import Home from './views/Home/Home';
import Serve from './views/Serve/Serve';
import Staff from './views/Staff/Staff';
import System from './views/System/System';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

function App() {
  var history= useHistory() 
  return (
    <div className="app">
      <Layout>

          <Header className="header">
            <div className="left">
            <div className="logo" >
              <img src="https://s4.ax1x.com/2021/12/06/orfx6f.jpg"></img>
              三棵树客服中心
            </div>
            <Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']} onClick={({item,key,keyPath,domEvent})=>{history.push(key)}}>
              <Menu.Item key="/home">首页</Menu.Item>
              <Menu.Item key="/serve">服务中心</Menu.Item>
              <Menu.Item key="/staff">员工中心</Menu.Item>
              <Menu.Item key="/client">客户管理</Menu.Item>
              <Menu.Item key="/system">系统管理</Menu.Item>
            </Menu>
            </div>
              <div className="right" >
                客服工资台
              <UserOutlined></UserOutlined>
            </div>
          </Header>
          <Switch>
            <Route path="/home" exact component={ Home }></Route>
            <Route path="/serve" exact component={ Serve }></Route>
            <Route path="/staff" component={ Staff }></Route>
            <Route path="/client" component={ Client }></Route>
            <Route path="/system" exact component={ System }></Route>
            <Redirect from="/" exact to="/home"></Redirect>
          </Switch>
          
      </Layout>

    </div>
  );
}

export default App;
